import React, { Component } from "react";
import { Carousel, Button } from "antd";
import "antd/dist/antd.css";
import { sendGetGoodsDetails } from "../../store/actionCreators/goodsDAction";
import store from "../../store";
import Buy from "./buy/buy";
import { connect } from "react-redux";
import styles from "./goodsdetails.module.scss";
import {withRouter} from "react-router-dom";

import {
  RightOutlined,
  AccountBookFilled,
  StarFilled,
} from "@ant-design/icons";
class goodsdeatails extends Component {
  constructor(props){
    super(props)
    this.buy=React.createRef()
    
  }
  componentDidMount() {
    store.dispatch(sendGetGoodsDetails());
  }
  goToshop=()=>{
    this.props.history.push("/goodsshop")
  }
  handleBuy = () => {
    this.buy.current.style.display="block"
  };
  render() {
    return (
      <div className={styles.goods}>
        <div className={styles.swipwerBox}>
          <Carousel autoplay="true" dotsClass={styles.string}>
            {this.props.goodsdails &&
              this.props.goodsdails.pics.map((v, index) => {
                return (
                  <div key={v.pics_id} className={styles.topSwipwer}>
                    <img src={v.pics_mid} alt="" />
                  </div>
                );
              })}
          </Carousel>
          <div className={styles.goodsname}>
            <h4>
              {" "}
              {this.props.goodsdails && this.props.goodsdails.goods_name}
            </h4>
            <p> ￥159</p>
          </div>
          <div className={styles.detail}>
            <div className={styles.detailTop}  onClick={this.handleBuy}>
              规格与数量选择 <RightOutlined />
            </div>
            <div className={styles.detailMid}>
              商品参数
              <RightOutlined />
            </div>
            <div className={styles.detailbtm}>
              服务：全场免邮费 30天无忧换货
            </div>
          </div>
          <div className={styles.goToshop} onClick={this.goToshop}>
            时尚礼貌旗舰店
            <RightOutlined />
          </div>
          <div className={styles.goodsintroduction}>
            <div className={styles.introTitle}>商品详情</div>
            <div className={styles.introImg}>
              {this.props.goodsdails &&
                this.props.goodsdails.pics.map((v, index) => {
                  return (
                    <div key={v.pics_id} className={styles.introSwipwer}>
                      <img src={v.pics_mid} alt="" />
                    </div>
                  );
                })}
            </div>
          </div>
        </div>
        <div className={styles.buttomnav}>
          <div className={styles.cion}>
            {" "}
            <AccountBookFilled style={{ fontSize: "36px", color: "#bfbfbf" }} />
          </div>
          <div className={styles.cion}>
            {" "}
            <StarFilled style={{ fontSize: "36px", color: "#bfbfbf" }} />
          </div>

          <div className={styles.wordLfet}>加入购物车</div>
          <div className={styles.wordRight} onClick={this.handleBuy}>
            立即购买
          </div>
        </div>
        
        <div className={styles.buyBox}  id="buycom" ref={this.buy}>
          <Buy img={this.props.goodsdails &&
              this.props.goodsdails.pics[0].pics_mid}></Buy>
          
        </div>
      
      </div>
    );
  }
}

export default connect((state) => {
  return {
    goodsdails: state.getGoodsDetails.goodsdails,
  };
}, null)(withRouter(goodsdeatails));
